import React, {useState, useEffect, useMemo} from 'react';

import CommonCard from '~/page/FineBi/common/CommonCard';
import DetailModal from '~/page/FineBi/common/DetailModal';
import DetailCardTableV2 from '~/page/FineBi/common/DetailCardTableV2';
import Loading from '~/page/FineBi/common/Loading';
import {numberHandle, parsePercent} from '~/utils/number';
import {parseDimensionAndValues} from '~/page/FineBi/utils/convert';
import {queryValues, queryDetail, download} from '~/service/refundReport';
import {CODE_7001} from '~/service/http';

export default ({dimensionAndValues, dId, isRatio, unitId}) => {
    const [loading, setLoading] = useState(false);
    const [modalVisible, setModalVisible] = useState(false);
    const [title, setTitle] = useState();
    const [topValue, setTopValue] = useState();
    const [list, setList] = useState([]);
    const [detailData, setDetailData] = useState({});

    const pDimensionAndValues = useMemo(() => parseDimensionAndValues(dimensionAndValues, dId), [
        dimensionAndValues,
        dId
    ]);

    const handleDownload = () => () => {
        const params = {
            unitId,
            dimensionAndValues: pDimensionAndValues
        };
        const excelName = title ? title : null;
        download(params, excelName);
    };

    const handleDetail = () => () => {
        setModalVisible(true);
        const params = {
            unitId,
            dimensionAndValues: pDimensionAndValues
        };
        queryDetail(params).then(res => {
            const {data} = res;
            setDetailData(data);
        });
    };

    useEffect(() => {
        const dashBoard = [
            {
                dashBoardName: dId,
                dashBoardId: dId
            }
        ];
        const param = {
            dimensionAndValues: pDimensionAndValues,
            dashBoardList: dashBoard
        };
        setLoading(true);
        queryValues(param)
            .then(res => {
                const cardDetail = res?.data[dId] ?? null;
                if (cardDetail) {
                    const {unitName} = cardDetail[unitId];
                    const cardValuesList = cardDetail[unitId].cardValues || [];
                    const {value} = cardValuesList[0] || {};
                    setTitle(unitName);
                    const title2 = isRatio ? parsePercent(value || 0, 2) : numberHandle(value ?? 0, 2);
                    setTopValue(title2);

                    const list = cardDetail[`${dId}_excel`]?.value?.map(entry => ({
                        name: entry['新老学员'],
                        value: isRatio ? parsePercent(entry['指标值'], 2) : numberHandle(entry['指标值'], 2)
                    }));

                    setList(list);
                }
            })
            .finally(code => {
                // 后端限流，啥也不操作
                if (code === CODE_7001) {
                    // return;
                }
                setLoading(false);
            });
    }, [pDimensionAndValues]);

    return (
        <div>
            <CommonCard
                title={title}
                style={{height: '100%'}}
                // span={6}
                loading={loading}
                content={(
                    <DetailCardTableV2 dataSource={list} title={topValue} />
                    // <Element {...props} dataSource={dataSource} onDrilling={handleDrilling} />
                )}
            />
            {/* <DetailCard
                title={title}
                onDownload={handleDownload({})}
                onDetail={handleDetail({})}
                style={{height: '100%'}}
            >
                <Loading loading={loading}>
                    <DetailCardTableV2 dataSource={list} title={topValue} />
                </Loading>
            </DetailCard> */}
            <DetailModal data={detailData} detailModalVisible={modalVisible} onCancel={() => setModalVisible(false)} />
        </div>
    );
};
